<!-- ChildComponent.vue -->
<script setup>
import { useEventBusStore } from '@/stores/eventBusStore';

const eventBus = useEventBusStore();

function handleConfirm() {
  // 发送确认消息
  eventBus.emitEvent('modalClose', { action: 'confirmed', data: '用户已确认' });
}

function handleCancel() {
  // 发送取消消息
  eventBus.emitEvent('modalClose', { action: 'cancelled', reason: '用户取消操作' });
}
</script>

<template>
  <div class="modal">
    <h2>子组件弹窗</h2>
    <button @click="handleConfirm">确认</button>
    <button @click="handleCancel">取消</button>
  </div>
</template>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: white;
  border: 1px solid #ccc;
  z-index: 1000;
}
</style>